<template>
  <div class="nav main">
    <el-menu :default-active="onRoutes" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      active-text-color="#1893fc" :router="true">
      <el-menu-item index="/home">企业首页</el-menu-item>
      <!-- <el-menu-item index="/post" :disabled='!flag' :class="{disabled:!flag}">职位管理</el-menu-item> -->
      <el-submenu index="/post" :disabled='!flag' :class="{disabled:!flag}">
        <template slot="title">职位管理</template>
        <el-menu-item index="/post">
          职位管理
        </el-menu-item>
        <el-menu-item index="/positionTemplate">
          职位模板
        </el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="/resume" :disabled='!flag' :class="{disabled:!flag}">简历管理</el-menu-item> -->
      <!-- <el-menu-item index="/resume"> -->
      <el-submenu index="/resume" :disabled='!flag' :class="{disabled:!flag}">
        <template slot="title">简历管理</template>
        <el-menu-item index="/resume">收到的简历</el-menu-item>
        <el-menu-item index="/collectResume">收藏的简历</el-menu-item>
      </el-submenu>
      <!-- </el-menu-item> -->
      <!-- <el-menu-item index="/TalentPool" :disabled='!flag' :class="{disabled:!flag}">人才库</el-menu-item> -->
      <el-submenu index="/TalentPool" :disabled='!flag' :class="{disabled:!flag}">
        <template slot="title">人才库</template>
        <el-menu-item index="/TalentPool">搜人才</el-menu-item>
        <el-menu-item index="/viewRecords">查看记录</el-menu-item>
        <el-menu-item index="/universityZone">高校毕业生专区</el-menu-item>
      </el-submenu>
      <el-menu-item index="/jobFair" :disabled='!flag' :class="{disabled:!flag}">招聘会</el-menu-item>
      <!-- <el-menu-item index="/Message">消息中心</el-menu-item> -->
      <el-submenu index="/Message">
        <template slot="title">消息中心<i class="read" v-if="read||chat"></i></template>
        <el-menu-item index="/Message">站内消息<i class="read" v-if="read"></i></el-menu-item>
      </el-submenu>
      <el-submenu index="/account">
        <template slot="title">账号管理</template>
        <el-menu-item index="/account">账号信息</el-menu-item>
        <el-menu-item index="/commonWords">常用语设置</el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="/account">账号管理</el-menu-item> -->
    </el-menu>
    <!-- <rightPopover></rightPopover> -->
  </div>
</template>

<script>
import { checkMsg, checkChat } from '../../api/index'
import bus from '../common/bus'
export default {
  data () {
    return {
      flag: true,
      read: false,
      chat: false
    };
  },
  created () {
    this.flag = sessionStorage.getItem('flag')
    bus.$on('companyAuth', msg => {
      this.flag = msg;
    });
    // this.checkChat();
    this.checkMessage();
    bus.$on('checkMsg', () => {
      this.checkMessage()
    })
  },
  components: {
    // rightPopover
  },
  computed: {
    onRoutes: {
      get: function () {
        if (!this.flag) {
          if (this.$route.path === '/post' || this.$route.path === '/resume' || this.$route.path === '/TalentPool' || this.$route.path === '/jobFair') {
            console.log(1);
            this.$router.push('/')
            this.$message.error('请先进行企业认证和个人认证');
            return '/home'
          }
        }
        return this.$route.path;
      },
      set: function (newValue) {

      }
    }
  },
  methods: {
    // 查看是否存在未读消息
    checkMessage () {
      checkMsg().then(res => {
        if (res.success) {
          this.read = res.data || false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 查看是否存在未读聊天消息
    checkChat () {
      checkChat().then(res => {
        if (res.success) {
          this.chat = res.data || false
        } else {
          this.$message.error(res.msg)
        }
      })

    },
    handleSelect (a, b) {
      console.log(this.flag);
      this.onRoutes = a;
    }
  }
};
</script>

<style lang="css" scoped>
.nav {
    height: 50px;
    background: #ccc;
    opacity: 1;
}
.el-menu {
    display: flex;
    text-align: center;
    border: none;
    width: 100%;
    justify-content: space-between;
    height: 50px;
}
.el-menu .el-menu-item { 
    /* width: 64px; */
    height: 50px;
    margin: 0 45px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    padding: 0 !important;
}
.el-menu .el-menu-item:not(.is-disabled):focus,
.el-menu .el-menu-item:not(.is-disabled):hover {
    outline: none;
    color: #1893fc !important;
}
.el-menu .el-menu-item /deep/ .el-submenu__icon-arrow {
    right: 0px;
}
.el-menu .el-menu-item.disabled {
    color: rgba(0, 0, 0, 0.25);
}
.el-menu .el-submenu__title {
    color: red;
}
.el-menu--horizontal /deep/ .el-submenu .el-submenu__title {
    height: 50px;
    color: #303133;
    font-size: 16px;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
    height: 36px;
    line-height: 36px;
}
.read {
    display: inline-block;
    vertical-align: text-top;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(226, 83, 83);
    margin-left: 4px;
}
</style>